<template>
  <!-- 面包屑 -->
  <!-- 面包屑 -->
  <!-- 面包屑 -->
  <div v-if="!(levelList.length<=1)" class="crumbs-box">
    <el-breadcrumb class="app-breadcrumb" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for="(item,index) in levelList" v-show="item.meta.title" :key="index">
        <router-link :to="item.redirect||item.path">{{ item.meta.title }}</router-link>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data() {
    return {
      levelList: []
    }
  },
  watch: {
    $route(to, from) {
      this.getBreadcrumb()
    }
  },
  mounted() {
    this.getBreadcrumb()
  },
  methods: {
    /**
      * 生成面包屑的方法
    */
    getBreadcrumb() {
      // console.log(this.$route, 123456)
      let matched = this.$route.matched.filter(item => item.name)
      // console.log(matched, 'matched')
      const first = matched[0]
      if (first && first.name !== '首页') {
        matched = [{ path: '/vMain', meta: { title: '首页' }}].concat(matched)
      }
      // this.levelList = matched
      this.levelList = Array.from(matched)
      // console.log(this.levelList, 'levelList111')
      // console.log(Array.from(this.levelList), 'levelList222')
    }
  }
}
</script>

<style lang="scss" scoped>
.crumbs-box{
  height: 53px;
  line-height: 53px;
  width: 100%;
  max-width: 1920px;
  min-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  .app-breadcrumb{
    width: 1200px;
    margin: 0 auto;
    font-size: 12px;
    .el-breadcrumb__inner{
      cursor: pointer;
    }
  }
}
</style>
